<script setup lang="ts">
import { ref } from 'vue'
import { Search, ArrowDown } from '@element-plus/icons-vue'

import AddQuestionAnswer from './AddQuestionAnswer.vue'
import ManageCategory from './ManageCategory.vue'
import FilterPanel from './FilterPanel.vue'

// 新增分类
const dialog1Visible = ref(false)

const handleClose = (done: () => void) => {
  done()
}

// 分类
const value = ref('全部分类')

const options = [
  {
    value: '全部分类',
    label: '全部分类',
  },
  {
    value: '其他',
    label: '其他',
  },
]

// 管理分类
const dialog2Visible = ref(false)

// 搜索
const searchValue = ref('')
</script>

<template>
  <div class="wrap">
    <el-button type="primary" @click="dialog1Visible = true">新增问题</el-button>

    <div class="category">
      <el-select v-model="value" placeholder="请选择" style="width: 120px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-button type="primary" plain @click="dialog2Visible = true">管理分类</el-button>
    </div>

    <div class="filter">
      <el-input
        v-model="searchValue"
        style="width: 260px"
        placeholder="请输入问题或答案关键字"
        :suffix-icon="Search"
      />
      <el-button type="info" plain>搜索</el-button>

      <el-popover :width="450" placement="bottom-end" trigger="click">
        <template #reference>
          <el-button plain>
            更多筛选<el-icon><ArrowDown /></el-icon>
          </el-button>
        </template>
        <filter-panel />
      </el-popover>
    </div>

    <!-- 对话框 新增问答 -->
    <el-dialog
      v-model="dialog1Visible"
      title="新增问答"
      width="750"
      align-center
      :before-close="handleClose"
    >
      <add-question-answer />
      <template #footer>
        <div>
          <el-button @click="dialog1Visible = false">取消</el-button>
          <el-button type="primary" @click="dialog1Visible = false">保存</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 对话框 管理分类 -->
    <el-dialog
      v-model="dialog2Visible"
      title="管理分类"
      width="480"
      align-center
      :before-close="handleClose"
    >
      <manage-category />
      <template #footer>
        <div>
          <el-button @click="dialog2Visible = false">取消</el-button>
          <el-button type="primary" @click="dialog2Visible = false">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.wrap {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.category {
  margin-left: 300px;
  display: flex;
}

.filter {
  display: flex;
}
</style>
